<template>
  <div class="flex flex-wrap items-end gap-4">
    <BaseIconBox
      size="md"
      shape="full"
      class="border-muted-200 dark:border-muted-600 dark:bg-muted-700 border bg-white text-gray-500"
    >
      <Icon name="ph:nut-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="bg-gray-200 text-gray-500 dark:bg-gray-800">
      <Icon name="ph:cat-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="bg-primary-500 text-white">
      <Icon name="ph:ghost-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="bg-lime-500 text-white">
      <Icon name="ph:club-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="bg-green-500 text-white">
      <Icon name="ph:leaf-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="bg-emerald-500 text-white">
      <Icon name="ph:mountains-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="bg-teal-500 text-white">
      <Icon name="ph:paint-brush-broad-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="bg-cyan-500 text-white">
      <Icon name="ph:rocket-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="bg-sky-500 text-white">
      <Icon name="ph:popcorn-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="bg-blue-500 text-white">
      <Icon name="ph:flask-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="bg-indigo-500 text-white">
      <Icon name="ph:drop-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="bg-purple-500 text-white">
      <Icon name="ph:image-square-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="bg-fuchsia-500 text-white">
      <Icon name="ph:piano-keys-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="bg-pink-500 text-white">
      <Icon name="ph:hand-waving-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="bg-rose-500 text-white">
      <Icon name="ph:lock-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="bg-red-500 text-white">
      <Icon name="ph:lightning-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="bg-orange-500 text-white">
      <Icon name="ph:pizza-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="bg-amber-500 text-white">
      <Icon name="ph:sun-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="bg-yellow-500 text-white">
      <Icon name="ph:sketch-logo-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="bg-muted-800 text-white">
      <Icon name="ph:moon-duotone" class="h-5 w-5" />
    </BaseIconBox>
  </div>
</template>
